<template>
  <view class="dividend">
    <pagehead>分红统计</pagehead>
    <!-- <view class="top"
      :style="'background: url('+IMAGE_STATIC+'/index/dividend-topBg.png) no-repeat; background-size: 100% 100%;'">
      <view class="txt">分红总金额</view>
      <view class="num">{{detail.total_share_benefit}}元</view>
    </view>
    <view class="info-box"
      :style="'background: url('+IMAGE_STATIC+'/index/dividend-infoBg.png) no-repeat; background-size: 100% 100%;'">
      <view class="info">
        <view class="txt">本月将分红总金额</view>
        <view class="num">{{detail.month_share_benefit}}</view>
      </view>
      <view class="info info1">
        <view class="txt">上月奖分红总金额</view>
        <view class="num">{{detail.last_share_benefit}}</view>
      </view> -->
      <view class="whiteBg">
      <view class="top">
        <view class="item" :style="'background: url('+IMAGE_STATIC+'/index/dividend-1.png) no-repeat; background-size: 100% 100%;'">
          <view class="txt">出机分红</view>
          <view class="txt mt10">未结算：{{detail.outbound_noreceive_money || 0}}</view>
          <view class="txt mt10">已结算：{{detail.outbound_receive_money || 0}}</view>
        </view>
        <view class="item" :style="'background: url('+IMAGE_STATIC+'/index/dividend-2.png) no-repeat; background-size: 100% 100%;'">
          <view class="txt">交易量分红</view>
          <view class="txt mt10">未结算：{{detail.pridirector_noreceive_money || 0}}</view>
          <view class="txt mt10">已结算：{{detail.pridirector_receive_money || 0}}</view>
        </view>
      </view>
      <view class="btn" @tap.stop="$tools.jump('/pages/userInfo/authorizationCertificate','04','分红规则')">分红规则</view>
      <view class="tab">
        <view v-for="(item, index) in tab" :key="index" :class="[currentIndex == index ? 'active' : '', 'item']"
          @tap="changeTab(index,item)">{{ item.name }}</view>
      </view>
    </view>
    <view class="record">
      <view class="record-wrapper" v-if="isShowPage">
				<scroll-view scroll-y="true" class="record-height" 
				v-if="recordsList.length != 0"
				@scrolltolower="lower()" v-show="expand">
					<view class="record-item record-bg" v-for="(item,index) in recordsList" :key="index"
					>
            <view class="info">
              <view class="record-title">{{ getSourceType(item.status)}}</view>
              <view class="record-num">{{ item.benefit }}</view>
            </view>
						<view class="info">
							<view class="record-time record-time--nowrap">{{  item.month | formatTime('YM','-')}}</view>
						</view>
					</view>
				</scroll-view>
        <view class="expand" v-if="recordsList.length != 0" @tap.stop="expand = !expand">
            {{ expand?'收起':'展开' }} 
            <image v-if="expand" :src="IMAGE_STATIC+'/images/arrow-down.png'" class="ico" mode="heightFix" />
            <image v-else :src="IMAGE_STATIC+'/images/arrow-up.png'" class="ico" mode="heightFix" />
          </view>
				<view class="initNoData" v-if="recordsList.length == 0">暂无记录</view>
			</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      IMAGE_STATIC: this.$url.assetsPath, //图片资源
      headerBarTop: 0,   //搜索栏的外边框高度，单位px
      detail: {},
      currentIndex:0,
      isShowPage:true,
      tab: [
        { name: '出机分红',status:'01' },
        { name: '交易量分红',status:'02' },
      ],
      recordsList:[
        {id:1,type:1,num:2,createTime:'2024-05-12'},
        {id:2,type:2,num:2,createTime:'2024-05-12'},
        {id:1,type:1,num:2,createTime:'2024-05-12'},
        {id:2,type:2,num:2,createTime:'2024-05-12'},
        {id:1,type:1,num:2,createTime:'2024-05-12'},
        {id:2,type:2,num:2,createTime:'2024-05-12'},
        {id:1,type:1,num:2,createTime:'2024-05-12'},
        {id:2,type:2,num:2,createTime:'2024-05-12'},
      ],
      lsShow:false,
      expand:true, // true展开，false收起
      status:'01',
      lastId:''
    };
  },
  computed:{
    getSourceType(){
				return function(type){
					switch (type){
						case '00':
							return '待结算';
							break;
						case '09':
							return '已结算';
							break;
          }
        }
      }
  },
  onReachBottom() {
    console.log("ddd");
    if (this.lsShow) {
    } else {
      return this.$tools.toast('到底了');
    }
  },
   // 下拉刷新
   onPullDownRefresh() {
    console.log('refresh');
    this.init();
    this.isLoadShow = true;
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 500);
  },
  onLoad() {
    this.headerBarTop = 10
    // #ifdef MP-WEIXIN 
    let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
    this.headerBarTop = menuButtonInfo.top;
    // #endif 
    this.getDetail()
    this.init();
  },
  methods: {
    init(){
      this.lastId = ''
      this.recordsList = []
      this.getRecord()
    },
    getDetail() {
      let data = {}
      this.$Ajax('/api/user/activity/shareBenefit', data, res => {
        if (res.success) {
          this.detail = res.data
        }
      }, err => {
      }
      )
    },
    // 列表
    getRecord() {
      let that = this;
      var data = {
        type:this.status,
      };
      console.log("data", data);
      uni.showLoading({
        mask: true
      })
      that.$Ajax('/api/user/activity/getShareBenefitList', data, res => {
        uni.hideLoading();
        that.isShowPage = true;
        that.recordsList =res.data
      }, err => {
        uni.hideLoading();
        that.isShowPage = true;
      }
      );
    },
    // 列表
    getRecord1() {
      let that = this;
      var data = {
        purse_type:'02',
        op_type:this.status,
        last_id:this.lastId,
      };
      console.log("data", data);
      uni.showLoading({
        mask: true
      })
      that.$Ajax('/api/wallet/info/getWalletRecordList', data, res => {
        uni.hideLoading();
        that.isShowPage = true;
         that.recordsList = that.recordsList.concat(res.data.walletRecordList);
        console.log('list', this.recordsList)
        if(res.data.walletRecordList.length>0){
          this.lastId = res.data.walletRecordList[res.data.walletRecordList.length-1].id
          this.lsShow = true
        }else{
          this.lsShow = false
        }
      }, err => {
        uni.hideLoading();
        that.isShowPage = true;
      }
      );
    },
    // 切换
    changeTab(index,item) {
      if (this.currentIndex != index) {
        this.currentIndex = index
        this.status = item.status
        this.init()
      }
    },
    lower() {
      console.log("分页", this.lsShow);
      if (this.lsShow == true) {
        this.getGoodsList();
      } else {
        // return this.$tools.toast('到底了');
      }
    },
  },
};
</script>

<style lang="scss" scoped>
//设置容器高度为100%
page{
  height:101vh;
}
.mt10{
  margin-top: 10rpx;
}
.dividend {
  width: 100vw;
  // height: 100%;
  // overflow: scroll;
.whiteBg{
  background: #fff;
  padding-bottom: 48rpx;
  overflow: hidden;
}
  .top {
    width: 93.6%;
    margin: auto;
    margin-top: 36rpx;
    @include flexLeft;
    .item{
      width: calc((100% - 20rpx) / 2);
      margin-left: 20rpx;
      height: 180rpx;
      padding: 36rpx 26rpx 0 26px;
    }
    .item:nth-of-type(1){
      margin-left: 0;
    }
    .txt {
      font-size: 24rpx;
      color: #FFFFFF;
    }
    .num {
      margin-top: 16rpx;
      font-weight: 500;
      font-size: 32rpx;
      color: #FFFFFF;
    }
  }
  .tab {
    margin-top: 32rpx;
    @include flexBetween;
    background: #FFFFFF;
    box-shadow: inset 0rpx 1rpx 0rpx 0rpx #E7E7E7;

    .item {
      width: 50%;
      text-align: center;
      height: 96rpx;
      line-height: 96rpx;
      font-size: 28rpx;
      color: rgba(0, 0, 0, 0.6);
    }

    .active {
      font-weight: 600;
      font-size: 32rpx;
      color: #333333;
      position: relative;
    }

    .active::before {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-40rpx);
      content: '';
      width: 80rpx;
      height: 8rpx;
      background: #AD2926;
      border-radius: 70rpx;
    }
  }
  .record{
		background: #fff;
		margin-top: 20rpx;
		&-wrapper{
      width: 93.6%;
		  margin: auto;
		}
		&-bg{
			box-shadow: none;
		}
		&-item{
      padding: 34rpx 28rpx;
      color: #fff;
			border-bottom: 1px solid #E9E9E9;
		}
    .info{
      @include flexBetween;
      margin-top: 24rpx;
    }
    &-item:nth-last-of-type(1){
      border-bottom: none;
    }
    &-title,&-num{
			font-weight: bold;
			font-size: 30rpx;
			color: #333333;
    }
    &-num{
    color: #AD2926;
    }
    &-time{
      font-size: 22rpx;
      color: rgba(51, 51, 51, 0.60);
    }
	}	

  .expand{
    @include flexCenter;
    font-size: 28rpx;
    color: #333333;
    line-height: 48rpx;
    margin-top: 32rpx;
    padding-bottom: 32rpx;
    .ico{
      width: 32rpx;
      height: 32rpx;
    }
  }
  .btn {
    width:93.6%;
    margin: auto;
    margin-top: 20rpx;
    // position: absolute;
    // bottom: 60rpx;
    // left: 8.5%;
    text-align: center;
    height: 88rpx;
    line-height: 88rpx;
    border-radius: 16rpx;
    background: #AD2926;
    font-weight: 500;
    font-size: 32rpx;
    color: #FFFFFF;
  }

  image {
    width: 100%;
    height: 100%;
  }
}
</style>
